<template>
  <div class="recomend">
    <scroll ref="scroll" :data="disclist" class="recomend_main" :click="false">
      <div>
        <!--轮播插件-->
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,$index) in slider" :key="$index">
              <figure class="wp-avatar banner">
                <a :href="item.linkUrl">
                  <img v-cloak @load="loadImage()" :src="item.picUrl" />
                  </a>
              </figure>
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
        </div>
        <div class="gridlist-demo-container">
          <mu-grid-list class="gridlist-demo">
            <mu-sub-header>热门歌单</mu-sub-header>
            <mu-grid-tile v-for="(item,$index) in disclist" :key="$index">
              <img v-lazy="item.imgurl" class="needsclick" />
              <span slot="title">{{item.dissname}}</span>
              <span slot="subTitle">by <b>{{item.creator.name}}</b></span>
              <mu-icon-button href="https://www.baidu.com" icon="play_circle_outline" slot="action" />
            </mu-grid-tile>
          </mu-grid-list>
        </div>
      </div>
      <div class="loading-container" v-show="!disclist.length>0">
        <loading></loading>
      </div>
    </scroll>
  </div>
</template>
<script>
  import scroll from "@/base/scroll"
  import loading from "@/base/loading"
  import {
    getRecomend,
    getDiscList
  } from "@/api/recomend"
  import {
    ERR_OK
  } from "@/api/config"
  export default {
    name: "recomend",
    data() {
      return {
        slider: [],
        swiperObj: null,
        disclist: [],
        checkLoaded: false
      };
    },
    methods: {
      async _getRecomend() {
        const res = await getRecomend()
        if (res.code === ERR_OK) {
          this.slider = res.data.slider
        }
        var that = this;
        setTimeout(function () {
          that.initslider()
        }, 100)
      },
      async _getDiscList() {
        const res = await getDiscList()
        if (res.code === ERR_OK) {
          this.disclist = res.data.list
        }
      },
      initslider() {
        var swiper = new Swiper('.swiper-container', {
          pagination: '.swiper-pagination',
          paginationClickable: true,
          lazyLoading: true,
          autoplay: 5000,
          loop: true,
          speed: 600,
        });
      },
      loadImage() {
        if (!this.checkLoaded) {
          this.$refs.scroll.refresh()
          this.checkLoaded = true
        }
      }
    },
    created() {
      this._getRecomend()
      this._getDiscList()
    },
    mounted() {},
    components: {
      scroll,
      loading
    }
  }

</script>
<style lang="scss" scoped>
  .recomend {
    position: fixed;
    width: 100%;
    top: 56px+48px;
    bottom: 0px;
    .recomend_main {
      height: 100%;
      overflow: hidden;
    }
  }

  .swiper-container {
    width: 100%;
  }

  figure {
    margin: 0;
    img {
      width: 100%;
    }
  }

  .mu-grid-tile>img {
    width: 100%;
  }

  .mu-grid-tile-title {
    font-size: 14px;
  }

  .loading-container {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%)
  }

</style>
